import React from 'react';
import {Form, Input, Modal} from 'antd';
import form, {emptyRule} from './_/form';
import redux from './_/redux';
//import {dataKey} from '../util/bed';

const FormItem = Form.Item;
const oldPasswordTip = '请输入旧密码';
const newPasswordTip = '请输入新密码';
const confirmPasswordTip = '请输确认密码';

@redux('app', {
    data: 'user',
    actions: 'changepwd',
    actionsOnly: true
}, {
    showLoading: true
})
//将app.user挂到当前组件上，并加前缀命名为userdata，data是自动加的名称
@redux('app', {
    data: 'user',
    prefix: 'user'
})
// @redux('app', {
//     data: [dataKey],
//     prefix: 'pwd'
// })
@form({
    data: "userdata",
    newData: {
        oldPassword: null,
        newPassword: null,
        confirmPassword: null
    }
})
export default class ChangePasswordForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: this.props.visible || false
        };
        this.resetFields = this.resetFields.bind(this);
        this.checkOldPwd = this.checkOldPwd.bind(this);
        this.checkNewPwd = this.checkNewPwd.bind(this);
        this.checkConfirmPwd = this.checkConfirmPwd.bind(this);
    }

    componentWillReceiveProps(props) {
        // if (this.state.pwd[dataKey] && this.state.pwd[dataKey] > 0) {
        //     this.setState({
        //         visible: false
        //     });
        // }
        this.setState({
            visible: props.visible
        });
    }

    onCancel = () => {
        this.props.onCancel();
        this.resetFields();
    };

    resetFields() {
        this.props.form.resetFields();
    }
    //修改密码
    ChangePwd = () => {
        this.props.form.validateFieldsAndScroll((err, vals) => {
            if (!err) {
                //console.log('vals:', vals);
                vals.Id = this.props.userdata.Id;
                vals.UserName = this.props.userdata.UserName;
                this.props.changepwd(vals);
                this.resetFields();
                this.props.onCancel();
            }
        });
    };
    //旧密码校验
    checkOldPwd(rule, value, callback) {
        if (value) {
            //const form = this.props.form;
            //const username = form.getFieldValue('UserName');
            // const data = {
            //     UserName: username,
            //     Password: value
            // };
            // this.props.usercheckpwd(data).then(client=> {
            //
            // });
            //callback('旧密码输入错误！');
            callback();
        } else {
            callback();
        }
    }
    //新密码校验
    checkNewPwd(rule, value, callback) {
        const form = this.props.form;
        const oldPassword = form.getFieldValue('oldPassword');
        if (value && value === oldPassword) {
            callback('新密码不能和旧密码相同！');
        } else {
            callback();
        }
    }
    //确认密码校验
    checkConfirmPwd(rule, value, callback) {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('newPassword')) {
            callback('两次输入密码不一致！');
        } else {
            callback();
        }
    }
    render() {
        const {form} = this.props;
        const {getFieldDecorator: fp} = form;
        // const userId = form.getFieldsValue("Id");
        // console.log("userId:", userId);
        const oldPassword = fp('oldPassword', {
            rules: [
                emptyRule(oldPasswordTip),
                {required: true, min: 1, max: 32, whitespace: true, message: '必填项'},
                {validator: this.checkOldPwd}
            ]
        });
        const newPassword = fp('newPassword', {
            rules: [
                emptyRule(newPasswordTip),
                {required: true, min: 1, max: 32, whitespace: true, message: '必填项'},
                {validator: this.checkNewPwd}
            ],
            onChange: () => {
                form.setFieldsValue({confirmPassword: null});
            }
        });
        const confirmPassword = fp('confirmPassword', {
            rules: [
                emptyRule('请再次输入密码'),
                {required: true, min: 1, max: 32, whitespace: true, message: '必填项'},
                {validator: this.checkConfirmPwd}
            ]
        });
        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 14},
        };
        return (
            <Modal
                visible={this.state.visible}
                title="修改密码"
                onOk={this.ChangePwd}
                onCancel={this.onCancel}
            >
                <Form vertical>
                    {fp("Id")(<Input type="hidden"/>)}
                    {fp("UserName")(<Input type="hidden"/>)}
                    <FormItem {...formItemLayout} label="旧密码" hasFeedback>
                        {oldPassword(<Input placeholder={oldPasswordTip} type="password"/>)}
                    </FormItem>
                    <FormItem {...formItemLayout} label="新密码" hasFeedback>
                        {newPassword(<Input placeholder={newPasswordTip} type="password"/>)}
                    </FormItem>
                    <FormItem {...formItemLayout} label="密码确认" hasFeedback>
                        {confirmPassword(<Input placeholder={confirmPasswordTip} type="password"/>)}
                    </FormItem>
                </Form>
            </Modal>
        );
    }
}
